CSS 效能優化


Posted by Christy on 2021-09-16

[ MTR05 ]_第十三週(07/05 ~ 07/11):現代前端工具_CSS 優化 Part1 by minw

優化可以分成以下三種:

資源本身大小

minify

gzip:主要是後端

資源載入方式

  1. CSS Sprites

  2. Critical CSS

  3. Cache:後端

資源執行方式

選擇器

屬性渲染


Part2

Critical CSS

什麼情況下會載入慢?東西大

解法 1 可以分批載入,用 Critical CSS 把重要的先傳過去,剩下的慢慢傳

解法 2 小東西包成大東西,一起傳:例如 icon、小圖等等

Cache:東西傳過來以後,暫存在瀏覽器上。(偏後端)


part4

minify 或壓縮:

例如空格只是為了易讀,可以移除。










Related Posts

滲透測試基本技術 第二章(中篇)

滲透測試基本技術 第二章(中篇)

排列組合 & 機率(Permutation, Combination & Probability)

排列組合 & 機率(Permutation, Combination & Probability)

[week 1] 版本控制 - Git 進階指令 & GitHub

[week 1] 版本控制 - Git 進階指令 & GitHub


Comments